<template>
	<el-container>
		<el-aside width="20%">
			<el-container>
				<el-header>
					<div class="left-panel"></div>
					<div class="right-panel">
						<div class="right-panel-search">
							<el-input
								v-model.trim="reqParams1.sn"
								clearable
								placeholder="请输入 SN 查询"
								@keyup.enter="search" />
							<el-button icon="el-icon-search" type="primary" @click="search" />
						</div>
					</div>
				</el-header>
				<el-main class="nopadding">
					<scTable
						ref="table1"
						:api-obj="this.$API.prodtranssn.pageLike"
						:params="reqParams1"
						row-key="id"
						:initData="false"
						paginationLayout="prev, pager, next"
						highlightCurrentRow
						hideDo
						hideContextMenu
						@row-click="rowClick">
						<el-table-column prop="sn" label="SN" />
					</scTable>
				</el-main>
			</el-container>
		</el-aside>
		<el-container>
			<el-header>
				<div class="left-panel"></div>
				<div class="right-panel">
					<div class="right-panel-search"></div>
				</div>
			</el-header>
			<el-main class="nopadding">
				<scTable
					ref="table2"
					:api-obj="this.$API.prodarchive.page"
					:params="reqParams2"
					row-key="id"
					:initData="false"
					stripe
					hideDo
					hideContextMenu
					:expand-row-keys="expands">
					<el-table-column type="expand">
						<template #default="props">
							<el-card class="expand-card">
								<el-table :data="props.row.details" style="width: 100%;" max-height="250" stripe>
									<el-table-column prop="name" label="过程数据名称" width="260" />
									<el-table-column prop="value" label="数据值" width="220" />
									<el-table-column prop="lower" label="下限值" width="120" />
									<el-table-column prop="higher" label="上限值" width="120" />
									<el-table-column prop="result" label="判定">
										<template #default="scope">
											<el-tag
												type="success"
												v-if="scope.row.result === 'OK'"
												>{{ scope.row.result }}</el-tag
											>
											<el-tag
												type="danger"
												v-else-if="scope.row.result === 'NG'"
												>{{ scope.row.result }}</el-tag
											>
											<div v-else></div>
										</template>
									</el-table-column>
								</el-table>
							</el-card>
						</template>
					</el-table-column>
					<el-table-column prop="sn" label="SN" align="center" width="180" />
					<el-table-column prop="lineCode" label="产线编号" align="center" width="140" />
					<el-table-column prop="opCode" label="工位编号" align="center" width="100" />
					<el-table-column prop="procCode" label="工序编号" align="center" width="100" />
					<el-table-column prop="wo" label="工单号" align="center" width="140" />
					<el-table-column prop="productCode" label="产品编号" align="center" width="140" />
					<el-table-column prop="passResult" label="过站结果" align="center" width="100">
						<template #default="scope">
							<el-tag type="" v-if="scope.row.passResult === 1">{{ scope.row.passResultDesc }}</el-tag>
							<el-tag
								type="danger"
								v-else-if="scope.row.passResult === 2"
								>{{ scope.row.passResultDesc }}</el-tag
							>
							<el-tag type="info" v-else>{{ scope.row.passResultDesc }}</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="operator" label="操作员" align="center" width="100" />
					<el-table-column prop="inboundTime" label="进站时间" align="center" width="140" />
					<el-table-column prop="archiveTime" label="出站时间" align="center" width="140" />
					<el-table-column prop="cycleTime" label="用时(s)" align="center" width="100" />
				</scTable>
			</el-main>
		</el-container>
	</el-container>
</template>

<script>
export default {
    data() {
        return {
            reqParams1: {
                sn: '',
            },
            reqParams2: {
                sn: '',
            },
            expands: [],
        };
    },
    mounted() {
        this.reqParams1.sn = history.state.sn;
        this.search();
    },
    methods: {
        search() {
            if (this.reqParams1.sn) {
                this.$refs.table1.upData(this.reqParams1);
            }
        },
        rowClick(row) {
            this.reqParams2.sn = row.sn;
            this.$refs.table2.refresh();
        },
        expandChange(row, expandedRows) {
            // 只展开一行
            if (expandedRows.length) {
                this.expands = [];
                this.expands.push(row.id);
            } else {
                this.expands = [];
            }
        },
    },
}
</script>

<style lang="scss" scoped>
.expand-card {
    width: 100%;
    margin-left: 20px;
    margin-right: 20px;
}
</style>
